<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>图书管理</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
</head>
<script th:src="@{/js/jquery-3.2.1.min.js}"></script>
<body>
    <div class="container">
        <button id="insert">录入图书</button>
        <table class="table">
            <thead>
                <tr>
                    <td>编号</td>
                    <td>图书编号</td>
                    <td>图书名称</td>
                    <td>作者</td>
                    <td>出版社</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr th:each="book : ${books}">
                    <td th:text="${book.id}"></td>
                    <td th:text="${book.number}"></td>
                    <td th:text="${book.name}"></td>
                    <td th:text="${book.author}"></td>
                    <td th:text="${book.press}"></td>

                    <td>
                        <a th:href="@{'/book/find/'+${book.id}}">查看详情</a> | <a th:onclick="deleteBook([[${book.id}]])" href="javascript:void(0)">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>
        <hr/>

    </div>
</body>
<script>
    $(function () {
        $("#insert").click(function () {
            location.href="/book/add";
        })

    })
    function deleteBook(id){
        $.ajax({
            url:"/book/delete/"+id,
            type:"delete",
            dataType:"json",
            success:function(data){
                if (data.code==200){
                    alert("删除成功")
                    location.reload()
                }
            }
        })
    }
</script>
</html>